<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form :model="filters" :rules="rule" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称">
                        <Select v-model="filters.housingId" placeholder="请选择小区" filterable clearable style="width:250px">
                            <Option v-for="item in housingList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="快递单号">
                        <Input v-model="filters.tackingNumber" placeholder="快递单号" style="width: 250px"/>
                    </FormItem>
                    <FormItem label="收件人手机号">
                        <Input v-model="filters.phone" placeholder="收件人手机号" style="width: 250px"/>
                    </FormItem>
                    <FormItem label="快递公司">
                        <Select v-model="filters.expressCompany" placeholder="快递公司" filterable clearable style="width:250px">
                            <Option v-for="item in expressCompanyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="状态">
                        <Select v-model="filters.status" placeholder="状态" filterable clearable style="width:250px">
                            <Option value="1">待取件</Option>
                            <Option value="2">滞留件</Option>
                            <Option value="3">已完成</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size="large" icon="md-search" @click="handleQuery()">
                            查询
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Table stripe border :loading="tableLoading" :columns="tableColumn" :data="tableData"
                   ref="table">
            </Table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
    </Row>
</template>
<script>
    //校验规则
    import baseURL from '_conf/url'

    const rules = {
    };
    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        //与后台交换数据
        this.postRequest("/api/boxPackage/loadData", params).then(res => {
            console.log(res);
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    }
    //加载所有小区
    let housing = function () {
        this.postRequest("/api/boxPackage/getHousing").then(res => {
            if (res.code == 20000) {
                this.housingList = res.data;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    }
    //加载快递公司
    let expressCompany = function(){
        this.postRequest("/api/kdCompany/queryKdCompany").then(res => {
            console.log(res)
            this.expressCompanyList = res;
        });
    }

    //查询
    let handleQuery = function(){
        this.loadData()
    }
    export default {
        data() {
            //收件表格
            return {
                //验证规则
                rule: rules,
                Tier: 0,
                Num: 0,
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                filters: {},
                housingList: [],
                expressCompanyList: [],
                //数据表格隐藏状态
                tableLoading: false,
                tableData: [],
                tableColumn: [
                    {
                        title: "小区名称",
                        key: "housingName"
                    },
                    {
                        title: "快递单号",
                        key: "tackingNumber"
                    },
                    {
                        title: "取件人手机号",
                        key: "phone"
                    },
                    {
                        title: "快递公司",
                        key: "expressCompany"
                    },
                    {
                        title: "快递员名称",
                        key: "courierName"
                    },
                    {
                        title: "快递员电话",
                        key: "courierPhone"
                    },
                    {
                        title: "快递柜名称",
                        key: "lockerName"
                    },
                    {
                        title: "快递柜地址",
                        key: "addres"
                    },
                    {
                        title: "滞留费",
                        key: "latticeTotal"
                    },
                    {
                        title: "入柜时间",
                        key: "createdAt"
                    },
                    {
                        title: "取件时间",
                        key: "updatedAt"
                    },
                    {
                        title: "快递类型",
                        key: "packageType",
                        render: (h, params) => {
                            let _this = this;
                            let texts = "";
                            if (params.row.status == 1) {
                                texts = "大包裹";
                            } else if (params.row.roleId == 2) {
                                texts = "中包裹";
                            } else if (params.row.roleId == 3) {
                                texts = "小包裹";
                            }
                            return h(
                                "div",
                                {
                                    props: {}
                                },
                                texts
                            );
                        }
                    },
                    {
                        title: "状态",
                        key: "status",
                        render: (h, params) => {
                            let _this = this;
                            let texts = "";
                            if (params.row.status == 1) {
                                texts = "待取件";
                            } else if (params.row.roleId == 2) {
                                texts = "滞留件";
                            } else if (params.row.roleId == 3) {
                                texts = "已完成";
                            }
                            return h(
                                "div",
                                {
                                    props: {}
                                },
                                texts
                            );
                        }
                    },

                ],
            };
        },
        created: function () {
            this.housing();
            this.expressCompany();
            this.loadData();
        },
        methods: {
            loadData,
            housing,
            expressCompany,
            handleQuery,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
